<template>
  <div>
    <a-float-button-group shape="circle" :style="{ right: '24px' }">
      <a-popover trigger="hover">
        <template #content>
          <p>{{ themes ? "深色" : "浅色" }}</p>
        </template>
        <a-float-button @click="changeTheme">
          <template #icon>
            <BulbOutlined v-if="themes" />
            <BulbFilled v-else />
          </template>
        </a-float-button>
      </a-popover>
      <a-float-button @click="showModal">
        <template #icon>
          <SettingOutlined />
        </template>
      </a-float-button>
      <a-float-button @click="reload">
        <template #icon>
          <SyncOutlined />
        </template>
      </a-float-button>
      <a-back-top :visibility-height="0" />
    </a-float-button-group>
    <a-modal v-model:open="open" @ok="handleOk" width="fit-content">
      <template #footer> </template>
      <a-typography-title :level="3">设置</a-typography-title>
      <a-layout>
        <a-layout-sider
          breakpoint="lg"
          collapsed-width="0"
          theme="light"
        >
          <a-menu
            v-model:selectedKeys="selectedKeys"
            mode="inline"
            @select="onSelect"
          >
            <a-menu-item
              v-for="settings_item in settings_items"
              :key="settings_item.key"
            >
              <span class="nav-text">{{ settings_item.label }}</span>
            </a-menu-item>
          </a-menu>
        </a-layout-sider>
        <a-layout style="width: fit-content">
          <div
            :style="{
              padding: '2.8rem 1.5rem',
              width: '30vw',
              background: 'transparent',
              minHeight: '26.25rem',
              minWidth: '18rem',
            }"
          >
            <component :is="currentComponent" />
          </div>
        </a-layout>
      </a-layout>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, shallowRef } from "vue";
import useThemeStore from "@/stores/modules/theme";
import GroupManagement from "./GroupManagement.vue"; // 假设有这个组件
import PersonalSettings from "./PersonalSettings.vue"; // 假设有这个组件
import About from "./About.vue";
import MenuTest from "@/components/MenuTest.vue";
import {
  BulbOutlined,
  SettingOutlined,
  SyncOutlined,
  BulbFilled,
} from "@ant-design/icons-vue"; // 假设有这个组件
const themeStore = useThemeStore();
const themes = ref(true);
const loading = ref(false);
const open = ref(false);
const selectedKeys = ref(["1"]); // 默认选中第一个
let currentComponent = shallowRef(GroupManagement); // 默认显示的组件
const settings_items = [
  {
    key: "1",
    label: "分组管理",
    component: GroupManagement,
  },
  {
    key: "2",
    label: "全局参数设置",
    component: PersonalSettings,
  },
  {
    key: "3",
    label: "关于",
    component: About,
  },
  {
    key: "4",
    label: "测试",
    component: MenuTest,
  },
];
const changeTheme = () => {
  themes.value = !themes.value;
  themeStore.changeTheme(themes.value);
};
const showModal = () => {
  open.value = true;
};
const reload = () => {
  window.location.reload();
};
const handleOk = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    open.value = false;
  }, 2000);
};

const onSelect = ({ key }) => {
  for (const item of settings_items) {
    if (item.key === key) {
      currentComponent.value = item.component;
      break;
    }
  }
};
</script>

<style scoped>
:deep(.ant-layout-sider-zero-width-trigger) {
  top: 0px;
}
</style>
